<template>
	<el-container>
		<el-header> <el-button type="primary" @click="back_url()">返回</el-button></el-header>
		<el-main>
				 <el-form ref="form" :model="form" label-width="80px" class="form">
					 <el-form-item label="名称">
					    <el-input v-model="form.name"></el-input>
					  </el-form-item>
					  <el-form-item label="楼栋">
					      <el-select v-model="form.project" placeholder="请选择楼栋"  class="select">
					        <el-option v-for="(item,index) in project" :key="index" :label="item.name" :value="item.id"></el-option>
					      </el-select>
					    </el-form-item>
						
						<el-form-item label="类型">
						    <el-select v-model="form.type" placeholder="请选择类型"  class="select">
						      <el-option v-for="(item,index) in type" :key="index" :label="item.name" :value="item.id"></el-option>
						    </el-select>
						  </el-form-item>
						  
						  <el-form-item label="建筑面积">
						      <el-input v-model="form.area"></el-input>
						    </el-form-item>
							<el-form-item label="价格">
							    <el-input v-model="form.price"></el-input>
							  </el-form-item>
							
							<el-form-item label="户型分部">
							    <el-input v-model="form.fenbu"></el-input>
							  </el-form-item>
							
							<el-form-item label="户型解析">
							    <el-input v-model="form.explain"></el-input>
							  </el-form-item>
							  
							  <el-form-item label="封面图">
							  	<template v-if="form.img!=''">
							  		<div style="display: flex;  flex-wrap: wrap;">
							  			<template>
							  				<i class="el-icon-circle-close" @click="delimg('img',0)"></i>
							  				<div class="picA" v-if="form.img!=''">
							  					<img class="img" :src="getimg + form.img">
							  				</div>
							  			</template>
							  		</div>
							  	</template>
							  	<div class="picA" style="margin-left: 19px;" @click="choose_pic('img')" v-if="form.img==''">
							  		<i class="el-icon-plus" style="margin-top: 45%; height: 28px; width: 28px;"></i>
							  	</div>
							  </el-form-item>
							    <el-form-item label="广告图" class="banner">
							    	<template>
							    		<div style="display: flex;  flex-wrap: wrap;">
							    			<template>
							    				<div class="banner_img" v-for="(item,index) in form.banner" :key="index">
							    					<i class="el-icon-circle-close" @click="delimg('banner',index)"></i>
							    					<div class="picA">
							    						<img class="img" :src="getimg+item">
							    					</div>
							    				</div>
							    				<div class="picA" style="margin-left: 19px;" @click="choose_pic('banner')" v-if="form.banner.length<5">
							    					<i class="el-icon-plus" style="margin-top: 45%; height: 28px; width: 28px;"></i>
							    				</div>
							    				
							    			</template>
							    		</div>	
							    	</template>
							    </el-form-item>
							
							
							<el-form-item label="物业类别">
								<el-select v-model="form.wy_type" class="select">
								  <el-option  label="居住物业" value="居住物业"></el-option>
								  <el-option  label="商业物业" value="商业物业"></el-option>
								  <el-option  label="工业物业" value="工业物业"></el-option>
								  <el-option  label="政府类物业" value="政府类物业"></el-option>
								  <el-option  label="其他" value="其他"></el-option>
								</el-select>
					
							  </el-form-item>
							
							<el-form-item label="房屋特色">
							    <el-input v-model="form.characteristic"></el-input>
							  </el-form-item>
							
							<el-form-item label="建筑类别">
							    <el-input v-model="form.jz_type"></el-input>
							  </el-form-item>
							  
							<el-form-item label="装修状态">
							    <el-input v-model="form.zx_state"></el-input>
							  </el-form-item>
							  
							<el-form-item label="产权年限">
							    <el-input v-model="form.years"></el-input>
							  </el-form-item>
							  
							<el-form-item label="开发商">
							    <el-input v-model="form.developers"></el-input>
							  </el-form-item>
							<el-form-item label="项目地址">
							    <el-input v-model="form.address"></el-input>
							  </el-form-item>
							  
							  <el-form-item label="项目位置">
							      <Amap :position="position" :center="form.position" zoom="18" :icon="icon" :choose_position="get_position"></Amap>
							    </el-form-item>
							  
							<el-form-item label="售楼地址">
							    <el-input v-model="form.sale_address"></el-input>
							  </el-form-item>
							<el-form-item label="咨询电话">
							    <el-input v-model="form.phone"></el-input>
							  </el-form-item>
							  
							<el-form-item label="发布状态">
								<el-select v-model="form.state" class="select">
								  <el-option  label="待发布" value="0"></el-option>
								  <el-option  label="在售" value="1"></el-option>
								  <el-option  label="已售出" value="2"></el-option>
								</el-select>
							  
							  </el-form-item>
							  
							
							<el-form-item label="周边环境">
							    <el-input v-model="form.around"></el-input>
							  </el-form-item>
							  
							<el-form-item label="详细信息">
							    <Edit :contents="form.infor" :content_back="get_content"></Edit>
							  </el-form-item>
							  
							<el-form-item>
							    <el-button type="primary" @click="onSubmit">提交</el-button>
							    <el-button @click="back_url()">取消</el-button>
							  </el-form-item>
							  
							
						
						
						
				 </el-form>
				 
		</el-main>
	<Pic :drawer="drawer" :back_fun="back" :send_father="get_img"></Pic>
	</el-container>
</template>

<script>
	import HouseModel from '../../model/house.js'
	import Pic from '../../components/pic_upload.vue'
	import {Api_url} from '../../api/config.js'
	import 	Amap from '../../components/amap.vue'
	import Edit from '../../components/quill-editor.vue'
	export default {
		data(){
			return{
				form:{
					name:'',
					project:'',
					type:'',
					area:'',
					price:'',
					fenbu:'',
					explain:'',
					img:'',
					banner:[],
					wy_type:'',
					characteristic:'',
					jz_type:'',
					zx_state:'',
					years:'',
					developers:'',
					address:'',
					sale_address:'',
					phone:'',
					state:'',
					infor:'',
					position:[104.922377,25.115802],
					around:''
				},
				position:[],
				getimg:Api_url,
				 icon:Api_url+'system/icon/shop.png',
				drawer:false,
				type:[],
				project:[],
				choose_type:'',
				edit_type:0,//0添加1编辑
			}
		},
		components:{
			Pic,
			Amap,
			Edit
		},
		mounted() {
			
			let house=JSON.parse(localStorage.getItem('edit_goods'));
			
			if(house)
			{
				this.edit_type=1
				this.form=house
				localStorage.removeItem('edit_goods')
			}
			
			this.get_type()
			this.get_project()
		},
		methods:{
			get_type(){
				HouseModel.get_type().then(res=>{
					this.type=res.data
				})
			},
			get_project(){
				HouseModel.get_project().then(res=>{
					this.project=res.data
				})
			},
			get_position(e){
					  this.form.position=e
					  this.get_address({position:e})
			},
			choose_pic(type){
				this.choose_type=type
				this.drawer=true
			},
			back(e){
				this.drawer=false
			},
			get_content(e){
				this.form.infor=e
			},
			delimg(type,index){
				if(type=='img'){
					this.form.img=''
				}
				if(type=='banner'){
					this.form.banner.splice(index,1)
				}
			},
			onSubmit(){
				if(this.edit_type==0){
					HouseModel.add_house(this.form).then(res=>{
						if(res.code==200){
							this.$message({
							         message: '添加成功',
							         type: 'success'
							       });
								this.back_url()
						}
					})
				}else{
					HouseModel.update_house(this.form).then(res=>{
						if(res.code==200){
							this.$message({
							         message: '修改成功',
							         type: 'success'
							       });
								this.back_url()
						}
					})
				}
			},
			get_address(data){
				HouseModel.regeo(data).then(res=>{
					if(res.data.infocode=="10000"){
						this.form.address=res.data.regeocode.formatted_address
					}
				})
			
			},
			get_img(e){
				if(this.choose_type=='img'){
					this.form.img=e.url
				}
				if(this.choose_type=='banner'){
					this.form.banner.push(e.url)
				}
				this.drawer=false
			}
		}
	}
</script>

<style>
	.form{
		width: 400px;
	}
	.select{
		width: 100%;
	}
	
	.picA {
		width: 148px;
		height: 148px;
		background-color: #FBFDFF;
		border: 1px dashed #C0CCDA;
		border-radius: 6px;
		box-sizing: border-box;
		vertical-align: top;
		text-align: center;
		margin: 6px;
	}
	
	.img {
		width: 144px;
		height: 144px;
		border: 1px solid #BFBFBF;
		border-radius: 3px;
	}
	
	.banner{
		width: 1000px;
	}
	
	.banner_img{
		display: flex;
		flex-wrap: wrap;
	}
	.sku_input{
		width: 150px;
	}
	.sku_data{
		display: flex;
		flex-wrap: wrap;
		padding: 10px;
	}
	.quill-editor{
		width: 1000px;
		height: 250px;
	}
	.sub{
		margin-top: 100px;
	}
</style>
